<template>
  <view class="community-item">
    <Navbar>
        <view class="user-head">
            <img :src="info.ownerUser.portrait" alt="">
            <span class="name">{{info.ownerUser.name}}</span>
            <view class="btn" @click="handleRemoveFollow(info)" v-if="info.userFollowStatus">已关注</view>
            <view class="btn" @click="handleAddFollow(info)" v-else>+关注</view>
           
        </view>
    </Navbar>
    <swiper class="swiper" :indicator-dots="true" indicator-color="rgba(16,16,17,0.1)" indicator-active-color="#16D998">
        <swiper-item v-for="(v,i) in info.imagesList" :key="i">
          <image :src="v" alt="" mode="aspectFill"></image>
        </swiper-item>
        <swiper-item v-if="info.imagesList && !info.imagesList.length">
          <image src="/static/community/1.png" alt="" mode="aspectFill"></image>
        </swiper-item>
    </swiper>
    <view class="content">
        <view class="text" v-html="info.content"></view>
        <view class="labels">
            <view class="label">
              <img src="/static/community/time.png" alt="">
              <span>{{$getDateDiff(info.createdTime)}}</span>
            </view>
            <view class="label" @click="handleOpenLocation">
              <img src="/static/community/location.png" alt="">
              <!-- {{info.location}}· -->
              <span>{{info.locationDescription}}</span>
            </view>
        </view>
    </view>
    <view class="comment">
        <view class="head" @click="handleRestComment">
            <span class="title">评论（{{ info.commentNum }}）</span>
            <img src="/static/community/down.png" alt="">
        </view>
        <view class="comment-null" v-if="info.commentsList && !info.commentsList.length ">
            <view class="text">已为你随机抽取一条盲盒评论</view>
            <view class="title">“开始以为是青铜，没想到是个王者”</view>
            <view class="btn" @click="handlecommentFour">立即评论</view>
        </view>
        <view class="comment-item" v-for="(item,index) in info.commentsList" :key="index">
            <image :src="item.portrait" alt="" mode="aspectFill"></image>
            <view class="cont">
              <view class="user">
                  <span class="name">{{item.name}}</span>
                  <!-- <view class="live">
                      <image src="/static//live.png" alt="" ></image>
                      <span>162</span>
                  </view> -->
              </view>
              <view class="text">{{item.commentText}}</view>
              <view class="user-text">
                  <span class="time">{{$getDateDiff(item.createdTime)}}</span>
                  <!-- <span class="city">长沙</span> -->
                  <span class="call" @click="handleCheckComment(item)">回复</span>
              </view>

              <view class="comment-item" v-for="(v,i) in item.childrenList" :key="i">
                  <image :src="v.portrait" alt="" mode="aspectFill"></image>
                  <view class="cont">
                    <view class="user">
                        <span class="name">{{v.name}}</span>
                        <!-- <view class="live">
                            <image src="/static//live.png" alt="" ></image>
                            <span>162</span>
                        </view> -->
                    </view>
                    <view class="text">{{v.commentText}}</view>
                    <view class="user-text">
                        <span class="time">{{$getDateDiff(v.createdTime)}}</span>
                        <!-- <span class="city">长沙</span> -->
                    </view>
                  </view> 
              </view>
            </view> 
        </view>
    </view>
    <view style=" height: 120rpx;"></view>
    <view class="comment-input">
       <view class="cont"> 
          <input cursor-spacing="85rpx" :focus='focusState' v-model="comment" type="text" :placeholder="checkComment.text?checkComment.text:'我来说两句...'" id="input" @confirm="handleAddComment(info)">
          <view class="menu">
            <img src="/static/community/share2.png" alt="">
            <img src="/static/liveA.png" alt="" @click="handleRemoveLive(info)" v-if="info.userLikeStatus">
            <img src="/static/liveD.png" alt="" @click="handleAddLive(info)" v-else>
            <span class="num">{{info.likeNum}}</span>
          </view>
       </view>
    </view>
  </view>
</template>
<script>
import { addLive ,removeLive,AddComment,AddFollow,removeFollow} from './community-server'
export default {
  data() {
    return {
      checkComment:{
        text:""
      },
      comment:"",
      focusState:false,
      info:{},
      id:''
    }
  },
  onLoad(e){
    this.id=e.id
    this.getDetailData()
  },
  methods: {
    //查看位置
    handleOpenLocation(){
      uni.openLocation({
        latitude: Number(this.info.latitude),
        longitude: Number(this.info.longitude),
        success: function () {
          console.log('success');
        },
        fail:(fail) => {
          console.log("🚀 ~ handleOpenLocation ~ fail:", fail) 
        },
      });
    },
    //关注
   async handleAddFollow(item){
      item.userFollowStatus=1
      await AddFollow(item.ownerUser.id)
      uni.showToast({title:"关注成功"})
    },
    //取消关注
    async handleRemoveFollow(item){
      item.userFollowStatus=0
      await addLive(item.ownerUser.id)
      uni.showToast({title:"取消关注"})
    },
    //重置选择评论
    handleRestComment(){
      this.checkComment={
        text:""
      }
      this.focusState=false
    },
    //选择评论
    handleCheckComment(item){
      this.checkComment.text="回复："+item.name
      this.checkComment.id=item.id
      this.focusState=true
    },
    async handleAddComment(item){
      if(!this.comment){
        uni.showToast({title:"评论不能为空",icon:"none"})
        return
      }
      if(this.checkComment.id){
        //二级评论
        await AddComment({
          commentText:this.comment,
          tagId:item.id,
          tagType:1,
          parentId:this.checkComment.id
        })
      }else{
        //一级评论
        await AddComment({
          commentText:this.comment,
          tagId:item.id,
          tagType:1
        })
      }
      this.comment=''
      uni.showToast({title:"评论成功"})
      // info.commentsList.push()
      this.getDetailData()
      
    },
    async handleAddLive(item){
      item.userLikeStatus=1
      item.likeNum+=1
      await addLive({tagId:item.id,tagType:1})
      uni.showToast({title:"点赞成功"})
    },
    async handleRemoveLive(item){
      item.userLikeStatus=0
      item.likeNum-=1
      await removeLive({tagId:item.id,tagType:1})
      uni.showToast({title:"取消点赞"})
    },
    handlecommentFour(){
      // 使用小程序的API设置焦点  
      this.focusState=true
    },
    getDetailData(){
      this.$http.get("/business/business/tags/get/"+this.id).then(res=>{
        console.log(res)
        if(!res.retObject){
          uni.showToast({title:"该帖子已被删除",icon:"none"})
          setTimeout(()=>{
            uni.navigateBack()
          },1000)
          return
        }
        this.info=res.retObject
        
      })
    }
  },
}
</script>
<style lang="scss" scoped>
  .comment-null{
    padding: 84rpx 0;
    text-align: center;
    .text{
      font-size: 24rpx;
      color: #D8D8D8;
      margin-bottom: 10rpx;
    }
    .title{
      font-size: 26rpx;
      color: #606266;
      margin-bottom: 20rpx;
    }
    .btn{
      display: inline-block;
      width: 176rpx;
      height: 72rpx;
      line-height: 72rpx;
      border-radius: 120rpx 120rpx 120rpx 120rpx;
      border: 2rpx solid #101011;
    }
  }
  .community-item{
    .user-head{
      display: flex;
      align-items: center;
      img{
        height: 60rpx;
        width: 60rpx;
        object-fit: cover;
        border-radius: 50%;
      }
      .name{
        margin: 0 10rpx;
        font-size: 28rpx;
        font-weight: 500;
      }
      .btn{
        width: 110rpx;
        height: 44rpx;
        line-height: 44rpx;
        text-align: center;
        background: #16D998;
        border-radius: 64rpx;
        font-weight: 400;
      }
    }
    &>.swiper{
      height: 906rpx;
      // margin-bottom: 38rpx;
      image{
        width: 100%;
        height: 846rpx;
      }
      /deep/ .uni-swiper-dots-horizontal{
        bottom: 0;
        .uni-swiper-dot{
          height: 12rpx;
          width: 12rpx;
        }
      }
    }
    &>.content{
      padding:0 30rpx;
      .text{
        font-size: 30rpx;
        margin-bottom: 24rpx;
        white-space: pre-line;
      }
      .labels{
        padding-bottom: 40rpx;
        border-bottom: 1px solid #F5F6F7;
        display: flex;
        align-items: center;
        
        .label{
          max-width: 400rpx;
          overflow: hidden;
          white-space: nowrap;
          background: #F5F6F7;
          padding: 4rpx 20rpx;
          // height: 40rpx;
          line-height: 40rpx;
          border-radius: 68rpx;
          img{
            width: 24rpx;
            height: 24rpx;
            margin-right: 4rpx;
          }
        }
        .label+.label{
          margin-left: 30rpx;
        }
        
      }
    }
    &>.comment{
      margin-top: 40rpx;
      padding: 0 30rpx;
      .head{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: 500;
        img{
          height: 40rpx;
          width: 40rpx;
        }
      }
      .comment-item{
        padding: 40rpx 0;
        &:not(:last-child){
          border-bottom: 1px solid #F5F6F7;
        }
        display: flex;
        .comment-item{
          border-bottom: 0;
          padding: 0;
          margin-top: 22rpx;
        }
        &>image{
          width: 60rpx;
          height: 60rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }
        &>.cont{
          flex: 1;
          .user{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .name{
              color: #606266;
              line-height: 28rpx;
              margin-top: 10rpx;
            }
            .live{
              display: flex;
              align-items: center;
              color: #606266;
              image{
                width: 40rpx;
                height: 40rpx;
                margin-right: 4rpx;
              }
            }
          }
          .text{
            font-size: 26rpx;
            margin-top: 20rpx;
          }
          .user-text{
            font-size: 20rpx;
            margin-top: 12rpx;
            .time,.city{
              color: #909399;
            }
            .time{
              margin-right: 20rpx;
            }
            .city{
              margin-right: 10rpx;
            }
          }
        }
      }
    }
    &>.comment-input{
      font-size: 28rpx;
      height: 100rpx;
      padding-bottom: 20rpx;
      width: 100%;
      background-color: #fff;
      z-index: 11;
      position: fixed;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      .cont{
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        width: 100%;
        input{
          width: 418rpx;
          height: 72rpx;
          background: #F5F6F7;
          border-radius: 104rpx 104rpx 104rpx 104rpx;
          padding: 0 30rpx;
          font-size: 26rpx;
          flex: 1;
        }
        .menu{
          display: flex;
          align-items: center;
          img:nth-child(1){
            height: 44rpx;
            width: 44rpx;
            margin:0 30rpx;
          }
          img:nth-child(2){
            height: 52rpx;
            width: 52rpx;
            margin-right: 4rpx;
          }
        }
      }
    }
  }
</style>